<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>https://codepen.io/myacode/pen/PoqQQNM</title>

    <link rel="stylesheet" href="./style.css">
</head>
<body>

<header class="head">
    <a href="https://codepen.io/ReGGae/live/povjKxV" target="_blank" data-txt="fullscreen is best">
        <div>fullscreen is best</div>
    </a>
    <div>
        <a href="https://twitter.com/Jesper_Landberg" target="_blank" data-txt="about">
            <div>about</div>
        </a>
        <a href="https://twitter.com/Jesper_Landberg" target="_blank" data-txt="contact">                     <div>contact</div>
        </a>
    </div>
</header>

<div class="slider | js-drag-area">
    <div class="slider__inner | js-slider">
        <div class="slide | js-slide">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex1.jpg" alt="" crossorigin="anonymous" draggable="false">
            </div>
        </div>
        <div class="slide | js-slide" style="left: 120%;">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
            </div>
        </div>
        <div class="slide | js-slide" style="left: 240%;">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex1.jpg" alt="" crossorigin="anonymous" draggable="false">
            </div>
        </div>
        <div class="slide | js-slide" style="left: 360%;">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
            </div>
        </div>
        <div class="slide | js-slide" style="left: 480%;">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex1.jpg" alt=""crossorigin="anonymous"  draggable="false">
            </div>
        </div>
        <div class="slide | js-slide" style="left: 600%;">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
            </div>
        </div>
        <div class="slide | js-slide" style="left: 720%;">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex1.jpg" alt="" crossorigin="anonymous" draggable="false">
            </div>
        </div>
        <div class="slide | js-slide" style="left: 840%;">
            <div class="slide__inner | js-slide__inner">
                <img class="js-slide__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/tex2.jpg" alt="" crossorigin="anonymous" draggable="false">
            </div>
        </div>
    </div>
</div>

<div class="titles">
    <div class="titles__title titles__title--proxy">Lorem ipsum</div>
    <div class="titles__list | js-titles">
        <div class="titles__title | js-title">Moonrocket</div>
        <div class="titles__title | js-title">Spaceman</div>
        <div class="titles__title | js-title">Moonrocket</div>
        <div class="titles__title | js-title">Spaceman</div>
        <div class="titles__title | js-title">Moonrocket</div>
        <div class="titles__title | js-title">Spaceman</div>
        <div class="titles__title | js-title">Moonrocket</div>
        <div class="titles__title | js-title">Spaceman</div>
        <div class="titles__title | js-title">Moonrocket</div>
    </div>
</div>

<div class="progress">
    <div class="progress__line | js-progress-line"></div>
    <div class="progress__line | js-progress-line-2"></div>
</div>

</body>
<script src="script.js" type="module"></script>
</html>